<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下移动删除项</title>
    <div onclick='fn()'>+</div>
    <table width="250" border="1" >
  <tbody id="div"> <!-- TBody是在table中使用的，用来指明由它包括的各表格行做为表格的主体部分。-->
    <tr><!--<tr>:是用于表格里面的标签,表示行; <td>:是用于表格里面的标签,表示列。-->
      <td width="80%">c语言</td><!-- 单元格宽度为25%-->
      <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td><!--使用javascript:void(0)是为了能够传递this参数到事件处理程序 javascript:void(0)中的void是JavaScript中的一个操作符，这个操作符指定要计算一个表达式但是不返回值。-->
      <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
      <td width="25%"><a href="javascript:void(0)" onclick="shanchu(this)">删除</a></td>
    </tr>
    <tr>
      <td>英语</td>
      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
      <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
      <td><a href="javascript:void(0)" onclick="shanchu(this)">删除</a></td>
    </tr>
    <tr>
      <td>高等数学</td>
      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
      <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        <td><a href="javascript:void(0)" onclick="shanchu(this)">删除</a></td>
    </tr>
    <tr>
      <td>Java程序设计</td>
      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
      <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        <td><a href="javascript:void(0)" onclick="shanchu(this)">删除</a></td>
    </tr>
    <tr>
      <td>Html</td>
      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
      <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        <td><a href="javascript:void(0)" onclick="shanchu(this)">删除</a></td>
    </tr>
  </tbody>
</table>
</head>
<style>
    .on{
        background-color: yellow;
    }
    .in{
        background-color:pink;
    }
</style>
<body>
  <script>
    //上移
function moveUp(_a){
  var a_tr = _a.parentNode.parentNode;//选点击a的父级td的父级tr
  var a_tr_table=a_tr.parentNode;//tr的父级tbody
  var tr_tr = a_tr.previousSibling;//选择tr的同级前一个节点tr
  console.log(tr_tr.nodeType);
  //nodeType为1代表元素
  while(tr_tr&&tr_tr.nodeType!=1){//while如果不满足条件会一直执行下面的方法
       tr_tr = tr_tr.previousSibling;
  }
  if(tr_tr){
       a_tr_table.insertBefore(a_tr,tr_tr);//insertBefore(a_tr,tr_tr)a_tr要插入的节点,在tr_tr之前
  }
  color();

}
//变色
function color(){
    var element=document.getElementById("div");
    var tr=element.getElementsByTagName('tr');
    for(var i=0;i<tr.length;i++){
        if(i%2==0){
            tr[i].className="on";
        }else{
            tr[i].className="in";
        }
    }
}
color();
//下移
function moveDown(_a){
  var a_tr = _a.parentNode.parentNode;//a的tr
  var tr_tr = a_tr.nextSibling;//a的tr下的tr
  var a_tr_table = a_tr.parentNode;
  console.log(tr_tr.nodeType);
  while(tr_tr && tr_tr.nodeType != 1){
    tr_tr = tr_tr.nextSibling;

  }
  if(tr_tr){
    a_tr_table.insertBefore(tr_tr,a_tr);
  }
  color();

}
//删除
function shanchu(_a){
     var a_tr = _a.parentNode.parentNode;//a的tr
     a_tr.parentNode.removeChild(a_tr);
     color();

}
//添加
var a =1;
function fn(){
             a += a;
            var str="<tr><td>"+a+"</td><td><a href=\"javascript:void(0)\" onclick=\"moveUp(this)\">上移</a></td><td><a href=\"javascript:void(0)\" onclick=\"moveDown(this)\">下移</a></td><td><a href=\"javascript:void(0)\" onclick=\"shanchu(this)\">删除</a></td></tr>";
            var element=document.getElementById("div");
            element.innerHTML+=str;
            color();             
}
  </script>
</body>

</html>